<template>
	<view class="content">
		<view class="h2">
			你好，请登录
		</view>
		<view>
			<view class="input">
				<view>
					<image src="../../static/8977.png" mode="" class="image"></image>
					<input type="text" placeholder="请输入用户名" v-model="username" />
				</view>
				<view>
					<image src="../../static/8977.png" mode="" class="image"></image>
					<input type="text" placeholder="请输入密码" v-model="password" />
				</view>
			</view>
			<label >
				<checkbox class="chenck" value="cb" />登录即同意<text>《用户使用协议》和《隐私政策》 </text>
			</label>

			<navigator url="/pages/wode/index" open-type="switchTab" @click="getUser" class="button">登录</navigator>
			<view class="content-bottom">
				<text>手机验证码登录</text>
				<text>忘记密码</text>
			</view>
		</view>
	</view>

</template>

<script>
	import API from '../../api/index.js';

	export default {
		data() {
			return {
				username: '',
				password: ''
			}
		},
		methods: {
			async getUser() {
				let res = await API['login'](this.username, this.password)
				console.log(res, '登录')
				// 本地存储
				uni.setStorageSync('token', res.data.data.token)
				uni.setStorageSync('id', res.data.data.id)

			}
		}
	}
</script>

<style>
	.content{
		width: 100vw;
		height: 100vh;
		padding: 30px 10px 0;
		box-sizing: border-box;
	}
	.h2 {
		font-size: 20px;
		line-height: 60px;
		font-weight: 400;
	}

	.input .image {
		display: inline-block;
		width: 20px;
		height: 20px;
	}

	.input view {
		display: flex;
		border-bottom:1px solid #000 ;
	}
	.chenck{
		padding-top: 20px;
	}
	.button{
		width: 100%;
		height: 40px;
		border-radius: 5rem;
		background-color: cyan;
		text-align: center;
		line-height: 40px;
		font-size: 16px;
		color: aliceblue;
		margin: 20px 0;
	}	
	.content-bottom{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	
</style>